<template>
  <div class="admin-deal-money">
    <div>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/admin/index/home' }"
          ><i class="el-icon-s-home"> 首页</i></el-breadcrumb-item
        >
        <el-breadcrumb-item
          ><a href="/admin/index/dealmoney"
            ><i class="el-icon-s-finance">交易金额</i></a
          ></el-breadcrumb-item
        >
      </el-breadcrumb>
    </div>

    <div>
      <div class="admin-deal-money-head">
        <div class="dmin-deal-money-user">
          <div class="dmin-deal-money-user-icon">
            <img src="../assets/image/dealmoney.png" alt="" />
          </div>
          <div class="dmin-deal-money-user-main">
            <span>1,2234522.36</span>
            <span>总交易金额(元)</span>
          </div>
        </div>
        
      <div class="dmin-deal-money-user">
          <div class="dmin-deal-money-user-icon" style="background-color: #00ced1;">
            <img src="../assets/image/dealmoney.png" alt="" />
          </div>
          <div class="dmin-deal-money-user-main">
            <span>34522.36</span>
            <span>当天成交额(元)</span>
          </div>
        </div>
    


      </div>
    </div>

    <div class="admin-deal-money-btn">
      <el-button type="primary" >全部订单</el-button>
      <el-button type="success" >当天订单</el-button>
      <el-button style="background-color: #7FFFD4">当月订单</el-button>
    </div>

    <div class="admin-deal-money-main">
      <table>
        <thead>
          <tr>
            <th>序号</th>
            <th>ID</th>
            <th>成交金额</th>
            <th>成交时间</th>
            <th>状态</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>1</td>
            <td>HD202208100456789</td>
            <td>324.00</td>
            <td>2022-08-11</td>
            <td>已完成</td>
          </tr>
          <tr>
            <td>2</td>
            <td>HD202208100456789</td>
            <td>324.00</td>
            <td>2022-08-11</td>
            <td>已完成</td>
          </tr>
        </tbody>
      </table>

    </div>
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage"
        :page-size="100"
        layout="prev, pager, next, jumper"
        :total="1000"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      time: "",
      proname: "",
      currentPage: 1,
      tableData: [],
    };
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
  },
};
</script>

<style lang="scss" scoped>
.admin-deal-money {
  div {
    .admin-deal-money-head {
      margin: 20px 0;
      display: flex;
      // justify-content: space-between;
      margin-bottom: 20px;

      .dmin-deal-money-user {
        display: flex;
        border-radius: 4px;
        overflow: hidden;
        margin-left: 10px;
        .dmin-deal-money-user-icon {
          width: 100px;
          text-align: center;
          height: 60px;
          background-color: #00bfff;
          img {
            width: 28px;
            margin: 16px 0;
          }
        }
        .dmin-deal-money-user-main {
          padding-top: 10px;
          // line-height: 70px;
          width: 160px;
          text-align: center;
          display: flex;
          flex-direction: column;
          border: 1px solid gray;
          border-radius: 0 4px 4px 0;
          border-left: 0px;
        }
      }
    }
    
  }
  .admin-deal-money-btn{
    border: 1px solid rgba(222,222,222,0.4);
    padding: 10px;
  }
  .admin-deal-money-main{
    margin-top: 20px;
    table{
      border: 1px solid  rgba(222,222,222,0.4);
      width: 100%;
      text-align: center;
      border-collapse: collapse;
      line-height: 40px;
      th,td{
      border: 1px solid  rgba(222,222,222,0.4);

      }
    }
  }
  .block {
    float: right;
  }
}
</style>